<template>
    <div class="main-div">
        <el-menu mode="horizontal" :default-active="true" style="border: none;" @select="async (e)=>{index=e;e?initGetVideoList():initGetVideoLikes()}">
            <el-menu-item :index="true">作品</el-menu-item>
            <el-menu-item :index="false">喜欢</el-menu-item>
        </el-menu>
    </div>


    <div v-if="!showVideo">

        <div class="videoList">
            <div  v-for="video in videoList?.items" :key="video.id" class="videoItem">
                <div @click="chooseVideo=video;showVideo=true;">
                    <VideoInfo :vedio="video"></VideoInfo>
                </div>
            </div>
        </div>
    </div>

    <div v-else style="overflow-x: hidden;min-width: 1200px;position: fixed;margin-top: -270px;">
        <VideoWithInfo :video="chooseVideo" @close-video="closeVideo()"></VideoWithInfo>
    </div>

    <div class="pagination" >
        <el-pagination v-if="index" layout="prev, pager, next" v-model:current-page="videoListParm.pageNo" :page-count="Number.parseInt(videoList?.page ?? '0')" @update:current-page="async()=>{videoList=await getVideoList(videoListParm)}" />
        <el-pagination v-else layout="prev, pager, next" v-model:current-page="VideoListLikesParm.pageNo" :page-count="Number.parseInt(videoList?.page ?? '0')" @update:current-page="getVideoListByLikes()" />
    </div>
</template>

<script setup lang="ts">
    import {onMounted,defineProps,ref,watch} from 'vue'
    import getVideoList from '@/utils/getVideoList'
    import VideoListParm from '../../types/video/VideoListParm'
    import VideoWithInfo from '@/components/video/videoWithInfo.vue'
    import Page from '../../base/page'
    import Video from '../../types/video/Video'
    import request from '@/base/request'
    import { ElMessage } from 'element-plus'
    const index=ref(true)
    const showVideo=ref(false)
    const chooseVideo=ref<Video>()
    const t=defineProps(['userId'])

    watch(t,()=>{
        window.location.reload()
    })


    const videoList=ref<Page<Video>>()
    const videoListParm=ref<VideoListParm>({
        pageNo:1,
        pageSize:5,
        type:"",
        authorId:t.userId!==''?t.userId:-2
    })

    const VideoListLikesParm=ref({
        pageNo:1,
        pageSize:5,
        userId:t.userId
    })
    const closeVideo=()=>{
        showVideo.value=false
    }

    const initGetVideoList=async()=>{
        videoListParm.value.pageNo=1;
        videoListParm.value.pageSize=3;
        videoList.value=undefined
        videoList.value=await getVideoList(videoListParm.value)
    }

    const initGetVideoLikes=async()=>{
        VideoListLikesParm.value.pageNo=1;
        VideoListLikesParm.value.pageSize=3;
        videoList.value=undefined
        getVideoListByLikes()
    }

    const getVideoListByLikes=async()=>{
        const response=(await request.post('/video/videoBaseInfo/getVideoInfoListByLikes',VideoListLikesParm.value)).data
        if(response.code==200){
            videoList.value=response.data
        }else{
            if(response.msg==="未能读取到有效 token"){
                window.location.reload()
            }
            else ElMessage.error(response.msg)
        }
    }

    onMounted(async()=>{
        videoList.value=await getVideoList(videoListParm.value)
    })
    
</script>

<style scoped>

    .pagination{
        text-align: center;
        margin-left: 70vh;
    }
    .videoList{
        margin-top:10px;
        max-height: 50vh;
        overflow: auto;
        scrollbar-width:none
    }

    .videoItem{
        margin-top:10px;
        float:left;
        margin-left:20px;
        cursor:pointer;
    }

</style>